import React, { useRef, useState, useEffect } from 'react'
import { Row, Col, Form, Input, Button, Typography, Select, } from "antd"
import { UploadOutlined } from '@ant-design/icons';
import { baseURL } from '../../api/request';
import { observer } from 'mobx-react';
import { toast } from '../../utils/common';
import { ajax } from '../../api';
const { Title } = Typography
function Annoedit({ history, location }: any) {
    const [form] = Form.useForm()
    const ufile: any = useRef()
    const [imgSrc, setImgSrc] = useState<any>(null)

    useEffect(() => {
        getOneData()
    }, [])

    const getOneData = async () => {
        let { code, result }: any = await ajax.getannoitem({
            _id: new URLSearchParams(location.search).get("aid")
        })
        if (code == 200) {
            form.setFieldsValue(result)
            setImgSrc(result.desc)
        }
    }


    const onFinish = async (value: any) => {
        // 修改
        // value.userInfo = userInfo
        let { code, result }: any = await ajax.setannoitem({
            ...value,
            _id: new URLSearchParams(location.search).get("aid")
        })
        if (code == 200) {
            history.push("/main/anno/list")
        }
    }

    const onFinishFailed = () => {
        toast.error("请输入有效的公告信息")
    }

    const startUploadeFile = async () => {
        const file = ufile.current.files[0]
        const data = new FormData()
        data.append("file", file)
        let { code, result, path }: any = await ajax.uploadfile(data)
        if (code == 200) {
            setImgSrc(path)
            form.setFieldsValue({ desc: path })
        }
    }

    const handleClickUpload = () => {
        ufile.current.click()
    }
    return (
        <div style={{ height: "100%" }}>
            <Title level={4}>编辑公告</Title>
            <Row style={{ height: "100%" }}>
                <Col xs={18} sm={12} md={8} lg={6} style={{ height: "100%" }}>
                    <Form
                        name="basic"
                        labelCol={{ span: 24 }}
                        initialValues={{
                            password: "qwe123"
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                        form={form}
                        style={{ height: "100%" }}
                    >
                        <Form.Item
                            label="公告标题"
                            name="title"
                            rules={[{ required: true, message: '请输入公告标题!' }]}
                        >
                            <Input placeholder="请输入公告标题" />
                        </Form.Item>
                        <Form.Item
                            label="公告内容"
                            name="content"
                            rules={[
                                { required: true, message: '请输入公告内容!' },
                            ]}
                        >

                            <Input.TextArea cols={10} rows={6} placeholder="请输入公告内容" />
                        </Form.Item>

                        <Form.Item
                            label="公告描述"
                            name="desc"
                            rules={[
                                { required: true, message: '请上传公告图片!' },
                            ]}
                        >
                            {/* 上传图片  */}
                            <input type="file" ref={ufile} style={{ display: "none" }} onChange={startUploadeFile} />
                            <Button type="primary" onClick={handleClickUpload} icon={<UploadOutlined />}>{imgSrc ? '替换' : '上传'}描述图片</Button>
                            {
                                imgSrc && <img src={imgSrc.replace(/public/, baseURL)} alt="" style={{ width: '100%', height: 180, borderRadius: "6px", margin: "10px 0" }} />
                            }
                        </Form.Item>

                        <Form.Item >
                            <Row>
                                <Col span={10} style={{ flex: "0.70" }}>
                                    <Button danger htmlType="submit"  > 修改公告 </Button>
                                </Col>
                                <Col span={10} >
                                    <Button type="primary" onClick={() => history.go(-1)}  > 返回 </Button>
                                </Col>
                            </Row>
                        </Form.Item>

                    </Form>
                </Col>
            </Row>
        </div >
    )
}


export default observer(Annoedit)